---
comments: false
---


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>诗词详情</title>
  <style>
    .poem-card {
      /* border: 1px solid #ccc; */
      /* border-radius: 5px; */
      padding: 10px;
      margin: 10px;
      width: 100%;
      /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); */
      /* border-radius: 5px; */
      /* background-color: var(--bg-content-color); */
    }

    #poem-title {
      /* font-size: 3.2em; */
      font-weight: bold;
      margin-bottom: 5px;
    }

    #poem-author {
      color: #666;
      margin-bottom: 5px;
    }

    .data {
      opacity: 0.8;
      /* 初始时将数据的透明度设置为0，隐藏数据 */
      transition: opacity 0.5s ease;
      /* 添加过渡动画效果 */
    }

    #backButton {
      background-image: url('images/back.png');
      width: 20px;
      height: 20px;
      background-size: cover;
      cursor: pointer;
      /* background-color: #666; */
    }
  </style>
</head>

<body>
  <div id="backButton"></div>
  <div class="data">
    <h1 id="poem-title"></h1>
    <p id="poem-author"></p>
    <p id="poem-content"></p>
    <div>
      <h2>注释：</h2>
      <p id="comments"></p>
    </div>
    <div>
      <h2>翻译：</h2>
      <p id="translation"></p>
    </div>
    <div>
      <h2>赏析：</h2>
      <p id="appreciation"></p>
    </div>

  </div>

  <script>

var postTitle = document.querySelector('.post-title');
    postTitle.style.display = 'none';
    var headeRight = document.querySelector('.header__right');
    headeRight.style.display = 'none';
    var headeLeft = document.querySelector('.header__left');
    headeLeft.style.display = 'none';

    
    // 获取URL参数
    var urlParams = new URLSearchParams(window.location.search);

    // 获取诗词数据
    // 从localStorage中获取诗词数据
    var title = localStorage.getItem('selectedPoemTitle');
    var author = localStorage.getItem('selectedPoemAuthor');
    var content = localStorage.getItem('selectedPoemContent');
    var remark = localStorage.getItem('selectedPoemRemark');
    var translation = localStorage.getItem('selectedPoemTranslation');
    var shangxi = localStorage.getItem('selectedPoemShangxi');
    var dynasty = localStorage.getItem('selectedPoemDynasty');

    console.log(translation);
    // calStorage.setItem('selectedPoemRemark', remarkData);
    // localStorage.setItem('selectedPoemTranslation', translationData);
    // localStorage.setItem('selectedPoemShangxi', shangxiData);
    // localStorage.setItem('selectedPoemDynasty', dynastyData);

    // 在页面上展示诗词数据
    document.getElementById('poem-title').textContent = title;
    document.getElementById('poem-author').textContent = dynasty + ' · ' + author;
    document.getElementById('poem-content').textContent = content;



    document.getElementById('comments').textContent = remark;
    document.getElementById('translation').textContent = translation;
    document.getElementById('appreciation').textContent = shangxi;

    var img = document.getElementById('backButton');
    img.addEventListener('click', function () {
      window.history.back()
    });
  </script>
</body>

</html>